<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="top-box">
					<view class="screen-box flexWrapNo">
						<view class="address-wrap flexWrapNo" @tap="toggleArea()">
							{{currentPosition}}
							<image src="../../static/home/up-icon.png" class="wrap-icon" v-if="areaFlag"></image>
							<image src="../../static/home/down-icon.png" class="wrap-icon" v-else></image>
						</view>
						<view class="search-box flexWrapNo">
							<image src="../../static/home/search-icon.png" class="search-icon"></image>
							<input placeholder="搜索店名" placeholder-class="placeholderClass" v-model="keyWords" @input="getStoreList()"/>
						</view>
					</view>
					<view class="address-box flexWrapNo" v-if="areaFlag">
						<view class="address-item" v-for="(item,index) in areaList" :key="index" :class="{active:areaIndex==index}" @tap="changeArea(index)">
							{{item.shortname}}
						</view>
					</view>
				</view>
				<swiper class="banner-box"  :autoplay="true"  :interval="3000" :duration="1000" v-if="bannerList.length!=0">
					<swiper-item class="banner-item" v-for="(item, index) in bannerList" :key="index" @tap="bannerGo(item.store_id)">
						<view class="shop-img">
							<image :src="item.banner_image" mode="aspectFill"></image>
						</view>
					</swiper-item>
				</swiper>
				<!-- <view class="nav-box flexWrap">
					<view class="nav-item flexWarpCenterColumn" v-for="(item,index) in navList" :key="index" :class="{active:navIndex==index}" @tap="changeNav(index)">
						<text>{{item}}</text>
						<text class="nav-line"></text>
					</view>
				</view> -->
				<view class="shop-box" v-for="(item,index) in storeList" :key='index' @tap="goShopDetails(item.id,item)">
					<view class="shop-info">
						<view class="shop-name-box flexWrapNo">
							<view class="shop-name">{{item.shop_name}}</view>
							<view class="shop-status" :class="{'repair-status':item.store_status_data!='business'}">
								<block v-if="item.store_status_data=='business'">营业中</block>
								<block v-else-if="item.store_status_data=='rest'">休息中</block>
								<block v-else>筹备中</block>
							</view>
						</view>
						<!-- <view class="lable-box flexWrapNo">
							<view class="lable-item">中式黑八</view>
							<view class="lable-item">抢台费</view>
							<view class="lable-item">业余</view>
						</view> -->
						<view class="address-info flexWrap">
							<text>{{item.location}}</text>
							<view class="flexWrapNo">
								<image src="../../static/home/navigation-icon.png" class="navigation-icon"></image>
								<text style="flex: none;">距你{{item.distance}}km</text>
							</view>
						</view>
					</view>
				</view>
				<view class="empty-box flexWarpCenterColumn" v-if="storeList.length==0">
					<image src="/static/order/emptyBg.png" class="empty-image"></image>
					<view class="empty-tips">暂无数据</view>
				</view>
				<view class="tips-box flexWarpCenterColumn">
					<view>更多连锁门店，正在陆续加入</view>
					<view>敬请期待</view>
					<!-- <view class="telnum" @tap="makePhoneCall">加盟热线：{{phoneNumber}}&nbsp;&nbsp;&nbsp;微信号: moyu24h</view> -->
				</view>
				<!-- <view class="mask-wrap" v-if="areaFlag"></view> -->
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageOpc:0,
				longitude:"106.540541",
				latitude:"29.590991",
				storeList:[],
				phoneNumber:"4001633996",
				areaList:[],
				areaIndex:-1,
				areaFlag:false,
				navList:["全部","中式黑八","台球包房","斯诺克","棋牌"],
				navIndex:0,
				keyWords:"",
				city_id:"",
				bannerList:[],
				currentPosition:""
			}
		},
		onShareAppMessage() {
			return {
				
			};
		},
		onLoad() {
			// uni.setStorageSync('token',"a96bf20f-800d-4740-aa1d-7c921e738b4c")
			// #ifdef MP-WEIXIN
			wx.hideHomeButton();
			//#endif
			this.getStoreList();
			// this.getLocation();
			this.getAreaList();
			this.getRecommendBanner();
		},
		onPullDownRefresh: function() {
			this.getStoreList();
			this.$tools.loadIng()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 500)
		},
		onReady(){
			setTimeout(() => {
				this.pageOpc=1
			}, 100)
		},
		methods: {
			// 拨打电话
			makePhoneCall() {
				let that = this
				uni.makePhoneCall({
					phoneNumber:that.phoneNumber
				})
			},
			// 获取地区
			getAreaList(){
				this.$request.post(this.$api.areaList, {}, {}).then(res => {
					if (res.code == 1) {
						let {
							data = {}
						} = res;
						this.areaList=data.area_list
						this.currentPosition=data.current_position.shortname
					}
				})
			},
			// 获取轮播
			getRecommendBanner(){
				this.$request.post(this.$api.recommendBanner, {}, {}).then(res => {
					if (res.code == 1) {
						let {
							data = {}
						} = res;
						this.bannerList=data
					}
				})
			},
			// 选择地区
			changeArea(index){
				this.areaIndex=index
				this.city_id=this.areaList[index].id
				this.currentPosition=this.areaList[index].shortname
				this.getStoreList();
				this.toggleArea();
			},
			// 地区筛选的显示隐藏
			toggleArea(){
				this.areaFlag=!this.areaFlag
			},
			changeNav(index){
				this.navIndex=index
				this.getStoreList();
			},
			// 进入店铺
			goShopDetails(store_id,item){
				if(item.store_status_data=='business'){
					uni.setStorageSync('store_id',store_id)
					uni.switchTab({
						url:'/pages/home/index'
					})
				}else{
					this.$tools.showToast('该店铺暂时没营业')
				}
			},
			// 推荐店铺
			bannerGo(store_id){
				uni.setStorageSync('store_id',store_id)
				uni.switchTab({
					url:'/pages/home/index'
				})
			},
			// 获取经纬度
			getLocation() {
				let that = this
				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					success: function(res) {
						console.log(res)
						that.longitude=res.longitude
						that.latitude=res.latitude
						uni.setStorageSync('longitude',that.longitude)
						uni.setStorageSync('latitude',that.latitude)
						that.getStoreList();
					},
					fail(res) {
						that.$tools.showToast('请打开GPS后下拉刷新')
					}
				});
			},
			// 刷新
			// 获取店铺列表
			getStoreList(){
				uni.showLoading({
					title:'加载中...',
					mask:true
				})
				this.$request.post(this.$api.storeList, {
					longitude: this.longitude,
					latitude:this.latitude,
					device_type_data:this.navIndex,
					shop_name:this.keyWords,
					city_id:this.city_id
				}, {}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.storeList=data
					}
				}).finally(() => {
					setTimeout(() => {
						this.$tools.hideLoading()
					}, 1000)
				})
			}
		}
	}
</script>

<style lang="scss">
	.content{
		padding: 20upx;
	}
	.empty-box {
		margin-top: 64upx;
		.empty-image {
			width: 400upx;
			height: 400upx;
		}
		.empty-tips {
			font-size: 24upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 34upx;
			color: #333;
			margin-top: 22upx;
		}
	}
	.top-box{
		position: sticky;
		top: 0;
		z-index: 999;
		.screen-box{
			padding-bottom: 20rpx;
			.address-wrap{
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333;
				width: 160rpx;
				height: 64rpx;
				background: #FFFFFF;
				border-radius: 63rpx 63rpx 63rpx 63rpx;
				border: 2rpx solid rgba(255,255,255,0.25);
				justify-content: center;
				.wrap-icon{
					width: 34rpx;
					height: 34rpx;
					margin-left: 16rpx;
				}
			}
			.search-box{
				height: 64rpx;
				background:#FFFFFF;
				border-radius: 63rpx 63rpx 63rpx 63rpx;
				border: 2rpx solid rgba(255,255,255,0.25);
				margin-left: 28rpx;
				padding-left: 28rpx;
				.search-icon{
					width: 32rpx;
					height: 32rpx;
					margin-right: 14rpx;
				}
				input{
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color:#333;
					width: 400rpx;
				}
				.placeholderClass{
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #6e6e6e;
				}
			}
		}
	}
	.address-box{
		flex-wrap: wrap;
		z-index: 999;
		padding-top: 30rpx;
		.address-item{
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333;
			width: 160rpx;
			height: 64rpx;
			line-height: 64rpx;
			text-align: center;
			background: #FFFFFF;
			border-radius: 63rpx 63rpx 63rpx 63rpx;
			margin-right: 110rpx;
			margin-bottom: 20rpx;
			&:nth-of-type(3n){
				margin-right: 0;
			}
		}
		.active{
			background: #FFB726;
		}
	}
	.banner-box{
		height: 250upx;
		.banner-item{
			height: 250upx;
			border-radius:16upx;
			overflow: hidden;
			.shop-img{
				height: 100%;
			}
		}
	}
	.nav-box{
		padding: 32rpx 20rpx;
		.nav-item{
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333;
			.nav-line{
				width: 94rpx;
				height: 4rpx;
				margin-top: 10rpx;
			}
		}
		.active{
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #E69C2F;
			.nav-line{
				background: #E69C2F;
			}
		}
	}
	.shop-box{
		border-radius:16upx;
		overflow: hidden;
		margin-bottom: 20upx;
		.shop-img{
			height: 304upx;
			position: relative;
			.drawup{
				width: 76upx;
				height: 76upx;
				text-align: center;
				background:#50AB6E;
				border-radius: 50%;
				font-size: 36upx;
				font-family: PingFang SC;
				font-weight: bolder;
				line-height: 76upx;
				color: #FFFFFF;
				position: absolute;
				right: 28upx;
				bottom: 8upx;
			}
		}
		.shop-info{
			background-color: #FFFFFF;
			padding: 28upx 28upx;
			min-height:200rpx;
			.shop-name-box{
				.shop-name{
					font-size: 32upx;
					font-family: PingFang SC;
					font-weight: bold;
					line-height: 50upx;
					color:#333333;
				}
				.shop-status{
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					width: 112upx;
					height: 44upx;
					line-height: 44upx;
					text-align: center;
					background: #50AB6E;
					border-radius: 36upx;
					margin-left: 24upx;
				}
				.repair-status{
					background:#fc750d;
				}
			}
			.lable-box{
				margin-top: 20upx;
				.lable-item{
					height: 44rpx;
					line-height: 44upx;
					border-radius: 8rpx;
					padding: 0 20upx;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #333;
					margin-right: 10upx;
					border: 1rpx solid #68A973;
				}
			}
			.address-info{
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 34upx;
				color:#666666;
				margin-top: 14upx;
				align-items: start;
				.navigation-icon{
					width: 36upx;
					height: 36upx;
					margin-right: 8upx;
					flex: none;
				}
			}
		}
	}
	.tips-box{
		font-size: 24upx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 34upx;
		color: #969696;
		margin-top: 14upx;
		.telnum{
			font-size: 24upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 34upx;
			color: #7EE34A;
			margin-top: 22upx;
		}
	}
</style>
